<template>
  <div>
    <h1>App</h1>
    <!-- <TsInfo></TsInfo> -->
    <button @click="comName = 'TsInfo'">*TsInfo</button>
    <button @click="comName = 'TsUser'">TsUser</button>
    <button @click="comName = 'TsList'">*TsList</button>
    <button @click="comName = 'TsCart'">TsCart</button>

    <!-- <KeepAlive :include="['TsInfo', 'TsList']"> -->
    <!-- <KeepAlive include="TsInfo,TsList"> -->
    <!-- <KeepAlive exclude="TsInfo,TsList"> -->
    <KeepAlive>
      <!-- <component :is="comName"></component> -->
      <!-- <TsInfo v-if="comName === 'TsInfo'"></TsInfo>
      <TsUser v-if="comName === 'TsUser'"></TsUser>
      <TsList v-if="comName === 'TsList'"></TsList>
      <TsCart v-if="comName === 'TsCart'"></TsCart> -->
    </KeepAlive>
    <TsHeader></TsHeader>
    <TsFooter></TsFooter>

  </div>
</template>
<script>
import TsInfo from './TsInfo.vue';
import TsUser from './TsUser.vue';
import TsList from './TsList.vue';
import TsCart from './TsCart.vue';
export default {
  data() {
    return {
      comName: 'TsInfo'
    };
  },
  components: {
    TsInfo,
    TsUser,
    TsList,
    TsCart
  }
};
</script>

<style>
div {
  border: solid 1px;
  padding: 10px;
}
</style>